<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { insertRentBill } from '#/api';
const [BaseForm, formApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  layout: 'horizontal',
  schema: [
    {
      component: 'DatePicker',
      fieldName: 'month',
      componentProps: {
        picker: 'month',
        placeholder: '请选择月份',
        valueFormat: 'YYYY-MM-DD',
      },
      label: '月份',
      rules: 'required',
    },

    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入上月水表读数',
      },
      fieldName: 'water_last',
      label: '上月水表读数',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入上月电表读数',
      },
      fieldName: 'electric_last',
      label: '上月电表读数',
      rules: 'required',
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'InputNumber',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入水表读数',
      },
      // 字段名
      fieldName: 'water_current',
      // 界面显示的label
      label: '当前水表读数',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入电表读数',
      },
      fieldName: 'electric_current',
      label: '当前电表读数',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入房租',
      },
      defaultValue: 800,
      fieldName: 'rent',
      label: '房租',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入卫生费',
      },
      defaultValue: 10,
      fieldName: 'clean_fee',
      label: '卫生费',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入每吨水单价',
      },
      defaultValue: 5,
      fieldName: 'water_price',
      label: '水单价',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入每度电单价',
      },
      defaultValue: 1.5,
      fieldName: 'electric_price',
      label: '电单价',
      rules: 'required',
    },
    {
      component: 'Switch',
      defaultValue: false,
      componentProps: {
        class: 'w-auto',
      },
      fieldName: 'settle_utilities',
      label: '是否结算水电',
    },
  ],
  wrapperClass: 'grid-cols-1',
});
const [Drawer, drawerApi] = useVbenDrawer({
  class: 'w-1/2',
  onConfirm: getValue,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      formApi.resetForm();
    }
  },
});
async function getValue() {
  const validate = await formApi.validate();
  if (validate?.valid) {
    const data = await formApi.getValues();
    insertRentBill(data).then((r) => {
      drawerApi.close();
    });
    return data;
  }
}
</script>
<template>
  <Drawer title="新增" @onConfirm="getValue"> <BaseForm /> </Drawer>
</template>
